<!-- 答疑详情 -->
<template>
	<view class="register">
		<u-toast ref="uToast" />
		<view class="mh32">
			<view class="mainRow mt10 ml24 mt30">
				<!-- 头部 -->
				<view style="display: flex;width: 100%;justify-content : space-between;">
					<view style="height: 88rpx;display: flex;">
						<view>
							<u-avatar :src="answerList.avatar"></u-avatar>
						</view>
						<view style="margin-left: 10rpx;">
							<text class="color261 ">{{ answerList.username }}</text>
							<view style="margin-top: 8rpx;color: #6F6D6D;">
								<text>{{ answerList.time }}</text>
								<text style="margin-left: 20rpx;">{{ answerList.browse_count }}次浏览</text>
							</view>
						</view>
					</view>
					<view class=" color9595">楼主</view>
				</view>
			</view>
		</view>
		<view class="box mh32 mt24">
			<view>
				<view class="wenben text32 " style="display: flex;">
					<i class="iconfont icon-wenda1-copy color105 text44" style="margin-right:24rpx;"></i>
					<text class="text36 ">{{ answerList.content }}</text>
				</view>
			</view>
			<view class="mt60">
				<text class="shutiao" style="vertical-align:text-top;"></text>
				<text class="car">全部问答</text>
			</view>
			<view v-for="(item, index) in answerList.comment_list" class="huiDa text32 mt28"
				style="display: flex;padding-bottom: 26rpx;border-bottom:1rpx solid #EFEFEF;">
				<i class="iconfont icon-wenda-copy colorBO6 text44" style="margin-right:24rpx;"></i>
				<view class="Responder">
					<text class=" normalColor text28">{{ item.content }}</text>
					<view class="record	 text24 mt30">
						<view style="display: flex;align-items : center;">
							<u-avatar :src="item.avatar" :size="50"></u-avatar>
							<text class="color3B" style="margin-left: 8rpx;">{{ item.username }}</text>
							<view style="margin-left: 8rpx;">回答了一个问题</view>
						</view>

						<view class="normalColor" @tap="btnBClick(0, item.id , index )">
							<u-icon name="thumb-up" size="40rpx"></u-icon>
							<text>{{ item.support_count }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer collection-attention">
			<view class="btn collection" @click='followFn( id, answerList , "questions" )'>
				<u-icon name="star" size="40" :label='answerList.is_follow == 0 ? "关注此问题" : "已关注"'></u-icon>
			</view>
			<view class="btn answer" @click='goAnswer'>
				<u-icon name="edit-pen" size="40" label='立刻回答'></u-icon>
			</view>
		</view>
		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { questionsDetail } from '@/api/home.js'
import { support } from '@/api/me.js'
import { mixin } from "../../mixins/mixin.js"
export default {
	mixins:[mixin],
	data() {
		return {
			id: '', //上页传来的id
			answerList: {},
			index:'' ,//列表数据的索引
			idx:'',//某一条数据的id
		};
	},
	onLoad( options ) {
		this.id = options.id;
	},
	onShow(){
		this.getAnswerList(this.id);
	},
	methods: {
		//回答详情
		getAnswerList(id) {
			questionsDetail({
				id: id
			}).then(res => {
				this.answerList = res.data;
			}).catch(err => {
				console.log(err);
			});
		},
		btnBClick( type , id  , index   ){
			this.index = index;
			this.idx = id;
			uni.$u.debounce(this.likeDetails, 500);
		},
		//点赞
		likeDetails(){
			this.load( this.answerList.comment_list , this.index , 'support_count' );
			// //更新接口数据
			support({
				id:this.idx
			})
		},
		//发布问答
		goAnswer(){
			uni.navigateTo({
				url:`/pages/release/response?id=${this.id}`
			})
		}
	}
};
</script>

<style lang="scss">
	.collection-attention {
		display: flex;

		.btn {
			width: 50%;
			text-align: center;
			height: 95rpx;
			line-height: 96rpx;
		}

		.answer {
			color: #ffffff;
			font-size: 32rpx;
			background: #ee9b1f;
			border: 1rpx solid #ee9b1f;
		}

		.collection {
			color: #676767;
			font-size: 32rpx;
			background: #f1f1f1;
			border: 1rpx solid #f1f1f1;
		}
	}

	.footer {
		width: 100%;
		bottom: 0;
		position: fixed;
	}

	.Responder {
		width: 100%;
	}

	.shutiao {
		width: 12rpx;
		height: 36rpx;
		background-color: #105cf0;
		display: inline-block;
		border-radius: 30rpx;
	}

	.car {
		font-size: 40rpx;
		color: #261f1f;
		margin-left: 6rpx;
	}

	.record {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #abaaaa;
	}

	.wenben {}
</style>
